<template>
	<page-meta>
	    <navigation-bar
			title="设备信息维护"
			background-color="#EEEEEE"
			front-color="#ffffff "
	    />
	</page-meta>
	<view class = "content">
		<button type="primary" @tap="showTree">显示树形选择器</button>
		<button type="primary" @tap="treeEmptyBtn">清楚树形选择</button>
		<form @submit="formSubmit" @reset="formReset">
			<view class="uni-form-item" style = "margin-top: 5px;">
				<input class="uni-input" name="match" v-model="match" placeholder="请输入关键词" @blur = "matchWordsInput"/>
			</view>
		</form>
		<button type="primary" @tap="StationSearch">搜索</button>
		<scroll-view class="example-body" scroll-y>
			<uni-grid :column="3" :show-border="false" :square="false" @change="stationChange">
				<uni-grid-item  v-for="(item ,index) in stationContList" :index="index" :key="index">
					<view class="grid-item-box" :class="{'item-box': stationId.indexOf(item.text)!=-1}">
						<text class="text">{{item.text}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</scroll-view>
		
		<tki-tree ref="tkitree" :selectParent="true" :multiple="false" :range="list" :foldAll="false" rangeKey="name" @confirm="treeConfirm"
		 @cancel="treeCancel"></tki-tree>
		 <view class="uni-inline-item" style="margin-top: 10px;">
		 	<button type="primary" @click = "infoMoreRead">详情查看</button>
		 	<button type="primary" @click = "infoMoreDel">设备删除</button>
		 </view>
		 <view class="example-block">
		 	<view class="table">
		 		<z-table :tableData="nowData" singleSelect = "true" :columns="nowColumn" @onSort="doSort" :showLoading="false" :stickSide = "true"
		 		 @onClick="rowClick" :singleSelect="false" :showSelect="true" @onSelect="tableSelect"></z-table>
		 	</view>
			<view class="pagesComBox">
				<uni-pagination :show-icon="true" :total="total" @change="change" pageSize="5"/>
			</view>
		 </view>
		<!-- 对话框 -->
		<uni-popup ref="popupDialog" type="dialog">
			<uni-popup-dialog :type="msgDiaType" :title="msgDiaTitle" :content="msgDiaContent" :before-close="true" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import tableTitleConst from '../../../common/tableTitleConst.js'
	import tkiTree from '@/components/tki-tree/tki-tree.vue';
	import zTable from "@/components/z-table/z-table.vue";
	import uniPagination from '@/components/uni-pagination/uni-pagination.vue'
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import uniSection from '@/components/uni-section/uni-section.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue'
	let testList = [];
	export default {
		components: {
			tkiTree,
			zTable,
			uniPagination,
			uniList,
			uniListItem,
			uniSection,
			uniPopupMessage,
			uniPopupDialog,
			uniPopupShare
		},
		data() {
			return {
				total:0,//数据总数
				etType:"",
				systemName:"",
				limit:"5",//每页数据条数
				page:"1",//当前页
				match:"",//搜索关键词
				stationId:[],//选中的车站数组
				list: [],//tree树形集合
				stationContList:[],//车站总集合
				title: "设备信息维护数据表格",
				nowType: 0,
				nowData: false,
				nowColumn: false,
				nowHtml: '',
				emptyText:'暂无数据...',//数据为空时显示的wen
				myDebounce: this.debounce(this.setTable),
				msgDiaType:"info",
				msgDiaTitle:"提示",
				msgDiaContent:"确认删除吗？",
				delTableDataIndex:[],//删除table表格数据的下标数组
				selectContent: [
					{
						name: '左侧固定', // 功能名
						tableData: 'stickSideTableData', // 表格数据
						columns: 'stickSideColumns', // 表格列内容
						stickSide: true, // 左侧固定
						showSelect: true,//开启选择
						html: 'stickSideHtml'
					}
				],
				// 固定左侧
				stickSideTableData: [],
				stickSideColumns: tableTitleColumns,
				stickSideHtml: '<z-table showSelect :showSelect = "true" :stickSide = "true" :tableData="nowData" singleSelect = "true" :columns="nowColumn" :showLoading="false" @onClick="rowClick" @onSelect="tableSelect"></z-table>',
			}
		},
		watch: {
			nowType: {
				handler() {
					this.nowData = false
					this.nowColumn = false
					this.myDebounce()
				},
				immediate: true
			}
		},
		onLoad(option) {
			
			this.$myRequest({
				url:'/devStatus/getFMcTree',
				method:"GET",
			}).then((res) => {
				this.list = res.rows;
			});
			// uni.request({
			// 	url:"http://127.0.0.1:10100/devStatus/getFMcTree",
			// 	method:"GET",
			// 	success: (res) => {
			// 		this.list = res.data.rows;
			// 	}
			// });
			
			//车站
			this.$myRequest({
				url:'/devStatus/getStation',
				method:"GET",
			}).then((res) => {
				this.stationContList = res.result;
			});
			// uni.request({
			// 	url:"http://127.0.0.1:10100/devStatus/getStation",
			// 	method:"GET",
			// 	success: (res) => {
			// 		this.stationContList = res.data.result;
			// 	}
			// });
			// console.log(option+">>>"+option.editResult);
			// var editResultStr = option.editResult;
			// if(editResult == null){
				
			// }else if(editResult == "success"){
			// 	uni.showToast({
			// 		title:"更新成功!"
			// 	})
			// }else if (editResult == "error"){
			// 	uni.showToast({
			// 		title:"更新失败..."
			// 	})
			// }
			
			this.$myRequest({
				url:'/equipmentLAIM/getDeviceList',
				method:"POST",
				data:{
						stationId:JSON.stringify(this.stationId),
						etType:this.etType,
						systemName:this.systemName,
						match:this.match,
						page:this.page,
						limit:this.limit
					},
				header:{"content-type":"application/json"}
			}).then((res) => {
				if(res.code == 0){
					this.total = res.total;
					this.stickSideTableData = res.rows;
					this.nowData = this.$data[this.selectContent[this.nowType].tableData]
					this.nowColumn = this.$data[this.selectContent[this.nowType].columns]
					this.nowHtml = this.$data[this.selectContent[this.nowType].html]
				}else{
					uni.showToast({
						title:"请求失败...",
						icon:"none"
					})
				}
			});
			// uni.request({
			// 	url:"http://127.0.0.1:10100/equipmentLAIM/getDeviceList",
			// 	data:{
			// 			stationId:JSON.stringify(this.stationId),
			// 			etType:this.etType,
			// 			systemName:this.systemName,
			// 			match:this.match,
			// 			page:this.page,
			// 			limit:this.limit
			// 		},
			// 	header:{"content-type":"application/json"},
			// 	method:"POST",
			// 	success: (res) => {
			// 		if(res.data.code == 0){
			// 			this.total = res.data.total;
			// 			this.stickSideTableData = res.data.rows;
			// 			this.nowData = this.$data[this.selectContent[this.nowType].tableData]
			// 			this.nowColumn = this.$data[this.selectContent[this.nowType].columns]
			// 			this.nowHtml = this.$data[this.selectContent[this.nowType].html]
			// 		}else{
			// 			uni.showToast({
			// 				title:"请求失败...",
			// 				icon:"none"
			// 			})
			// 		}
			// 	}
			// });
		},
		methods: {
			treeEmptyBtn:function(){
				this.systemName = "";
				this.etType = "";
				uni.showToast({
					title:"清楚成功...",
					icon:"success"
				});
			},
			// 确定回调事件
			treeConfirm(e) {
				var dataRows = e[0];
				var flgLeal = dataRows.fLevel;
				var fParentName = "";
				var fMcName = "";
				if(flgLeal == 2){
					fMcName = dataRows.fMcName;
					this.etType = fMcName;
					fParentName = dataRows.fParentName;
					this.systemName = fParentName;
				}else if (flgLeal == 1){
					fParentName = dataRows.fMcRemark;
					this.systemName = fParentName;
				}else if (flgLeal == 0){
					uni.showToast({
						title:"第一级节点不参与搜索....",
						icon:"none"
					})
					return;
				}
			},
			// 取消回调事件
			treeCancel(e) {
				console.log(e)
			},
			// 显示树形选择器
			showTree() {
				this.$refs.tkitree._show();
			},
			matchWordsInput:function(e){
				this.match = e.detail.value;
			},
			StationSearch() {
				// this.page = 1;
				
				this.$myRequest({
					url:'/equipmentLAIM/getDeviceList',
					data:{
							stationId:JSON.stringify(this.stationId),
							etType:this.etType,
							systemName:this.systemName,
							match:this.match,
							page:this.page,
							limit:this.limit
						},
					header:{"content-type":"application/json"},
					method:"POST"
				}).then((res) => {
					if(res.code == 0){
						this.total = res.total;
						this.stickSideTableData = res.rows;
						this.nowData = this.$data[this.selectContent[this.nowType].tableData]
						this.nowColumn = this.$data[this.selectContent[this.nowType].columns]
						this.nowHtml = this.$data[this.selectContent[this.nowType].html]
					}else{
						uni.showToast({
							title:"请求失败...",
							icon:"none"
						})
					}
				});
				// uni.request({
				// 	url:"http://127.0.0.1:10100/equipmentLAIM/getDeviceList",
				// 	data:{
				// 			stationId:JSON.stringify(this.stationId),
				// 			etType:this.etType,
				// 			systemName:this.systemName,
				// 			match:this.match,
				// 			page:this.page,
				// 			limit:this.limit
				// 		},
				// 	header:{"content-type":"application/json"},
				// 	method:"POST",
				// 	success: (res) => {
				// 		if(res.data.code == 0){
				// 			this.total = res.data.total;
				// 			this.stickSideTableData = res.data.rows;
				// 			this.nowData = this.$data[this.selectContent[this.nowType].tableData]
				// 			this.nowColumn = this.$data[this.selectContent[this.nowType].columns]
				// 			this.nowHtml = this.$data[this.selectContent[this.nowType].html]
				// 		}else{
				// 			uni.showToast({
				// 				title:"请求失败...",
				// 				icon:"none"
				// 			})
				// 		}
				// 	}
				// });
			},
			stationChange(e) {
				let {
					index
				} = e.detail
				var ContListText = this.stationContList[index].text;
				var stationIdIndexOf = this.stationId.indexOf(ContListText);
				if(stationIdIndexOf == -1){
					this.stationId.push(
						this.stationContList[index].text
					);
				}else {
					this.stationId.splice(stationIdIndexOf, 1);
				}
				
				uni.showToast({
					title: "选中"+ContListText,
					icon: 'none'
				})
			},
			//table表格
			setTable() {
				this.nowData = this.$data[this.selectContent[this.nowType].tableData]
				this.nowColumn = this.$data[this.selectContent[this.nowType].columns]
				this.nowHtml = this.$data[this.selectContent[this.nowType].html]
			},
			tableSelect(selectList) {
				this.delTableDataIndex = selectList;
				// uni.showToast({
				// 	title: `选中了TableData中下标为${selectList.join(',')}的元素`,
				// 	icon: 'none'
				// })
			},
			//查看
			infoMoreRead:function(){
				if(this.delTableDataIndex.length!=1){
					uni.showToast({
						title:"查看请勾选一项...",
						icon:"none"
					})
				}else{
					const checkRead = this.stickSideTableData[this.delTableDataIndex[0]];
					uni.redirectTo({
					    url: 'equipmentResumeEdit?eid='+checkRead.eid
						// events: {
						// 	editSubmited:function(data){
						// 		console.log(data);
						// 		if(data == "success"){
						// 			uni.request({
						// 				url:"http://127.0.0.1:10100/equipmentLAIM/getDeviceList",
						// 				data:{
						// 						stationId:JSON.stringify(this.stationId),
						// 						etType:this.etType,
						// 						systemName:this.systemName,
						// 						match:this.match,
						// 						page:this.page,
						// 						limit:this.limit
						// 					},
						// 				header:{"content-type":"application/json"},
						// 				method:"POST",
						// 				success: (res) => {
						// 					if(res.data.code == 0){
						// 						this.total = res.data.total;
						// 						this.stickSideTableData = res.data.rows;
						// 						this.nowData = this.$data[this.selectContent[this.nowType].tableData]
						// 						this.nowColumn = this.$data[this.selectContent[this.nowType].columns]
						// 						this.nowHtml = this.$data[this.selectContent[this.nowType].html]
						// 					}else{
						// 						uni.showToast({
						// 							title:"请求失败...",
						// 							icon:"none"
						// 						})
						// 					}
						// 				}
						// 			});
						// 		}else if (data == "error"){
						// 			uni.showToast({
						// 				title:"更新失败...",
						// 				icon:"none"
						// 			})
						// 		}
						// 	}
						// }
					});
				}
			},
			//删除
			infoMoreDel:function(){
				this.$refs.popupDialog.open();
			},
			//对话框点击取消事件
			dialogClose(done) {
				done();
			},
			//对话框点击确定事件
			async dialogConfirm(done) {
				for(let i = 0; i < this.delTableDataIndex.length; i++){
					var eidStr = this.stickSideTableData[this.delTableDataIndex[i]].eid
					await this.$myRequest({
					    url: "/equipmentLAIM/deleteMcAttr/"+eidStr
					});
				}
				
				this.$myRequest({
					url:'/equipmentLAIM/getDeviceList',
					data:{
							stationId:JSON.stringify(this.stationId),
							etType:this.etType,
							systemName:this.systemName,
							match:this.match,
							page:this.page,
							limit:this.limit
						},
					header:{"content-type":"application/json"},
					method:"POST"
				}).then((res) => {
					if(res.code == 0){
						this.total = res.total;
						this.stickSideTableData = res.rows;
						this.nowData = this.$data[this.selectContent[this.nowType].tableData]
						this.nowColumn = this.$data[this.selectContent[this.nowType].columns]
						this.nowHtml = this.$data[this.selectContent[this.nowType].html]
					}else{
						uni.showToast({
							title:"数据列表更新失败...",
							icon:"none"
						})
					}
				});
				// uni.request({
				// 	url:"http://127.0.0.1:10100/equipmentLAIM/getDeviceList",
				// 	data:{
				// 			stationId:JSON.stringify(this.stationId),
				// 			etType:this.etType,
				// 			systemName:this.systemName,
				// 			match:this.match,
				// 			page:this.page,
				// 			limit:this.limit
				// 		},
				// 	header:{"content-type":"application/json"},
				// 	method:"POST",
				// 	success: (res) => {
				// 		if(res.data.code == 0){
				// 			this.total = res.data.total;
				// 			this.stickSideTableData = res.data.rows;
				// 			this.nowData = this.$data[this.selectContent[this.nowType].tableData]
				// 			this.nowColumn = this.$data[this.selectContent[this.nowType].columns]
				// 			this.nowHtml = this.$data[this.selectContent[this.nowType].html]
				// 		}else{
				// 			uni.showToast({
				// 				title:"数据列表更新失败...",
				// 				icon:"none"
				// 			})
				// 		}
				// 	}
				// });
				done();
				uni.showToast({
					title:"删除成功...",
					icon:"success"
				})
			},
			debounce(fn, time = 1000) {
				let timer = null 
				return function() {
					if (timer) clearTimeout(timer);
					timer = setTimeout(fn, time);
				}
			},
			change(e) {
				this.page = e.current;
				
				this.$myRequest({
					url:'/equipmentLAIM/getDeviceList',
					data:{
							stationId:JSON.stringify(this.stationId),
							etType:this.etType,
							systemName:this.systemName,
							match:this.match,
							page:this.page,
							limit:this.limit
						},
					header:{"content-type":"application/json"},
					method:"POST"
				}).then((res) => {
					if(res.code == 0){
						this.total = res.total;
						this.stickSideTableData = res.rows;
						this.nowData = this.$data[this.selectContent[this.nowType].tableData]
						this.nowColumn = this.$data[this.selectContent[this.nowType].columns]
						this.nowHtml = this.$data[this.selectContent[this.nowType].html]
					}else{
						uni.showToast({
							title:"请求失败...",
							icon:"none"
						})
					}
				});
				// uni.request({
				// 	url:"http://127.0.0.1:10100/equipmentLAIM/getDeviceList",
				// 	data:{
				// 			stationId:JSON.stringify(this.stationId),
				// 			etType:this.etType,
				// 			systemName:this.systemName,
				// 			match:this.match,
				// 			page:this.page,
				// 			limit:this.limit
				// 		},
				// 	header:{"content-type":"application/json"},
				// 	method:"POST",
				// 	success: (res) => {
				// 		if(res.data.code == 0){
				// 			this.total = res.data.total;
				// 			this.stickSideTableData = res.data.rows;
				// 			this.nowData = this.$data[this.selectContent[this.nowType].tableData]
				// 			this.nowColumn = this.$data[this.selectContent[this.nowType].columns]
				// 			this.nowHtml = this.$data[this.selectContent[this.nowType].html]
				// 		}else{
				// 			uni.showToast({
				// 				title:"请求失败...",
				// 				icon:"none"
				// 			})
				// 		}
				// 	}
				// });
			}
			
		}
	}
</script>

<style>
	page{
		background-color: #F7F7F7;
	}
	.table{
		text-align: center;
		white-space: nowrap;
		overflow: scroll;
		text-overflow: ellipsis;
	}
	.table > z-table{
		white-space: nowrap;
		overflow: scroll;
		text-overflow: ellipsis;
	}
	.headerTitle{
		font-size: 18px;
		text-align: center;
	}
	.example-block {
		padding: 20rpx;
		margin: 5rpx -20rpx;
		background: #f7f9ff;
	}
	.example-body {
		/* width: 80%; */
		height: 300px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		margin-top: 10px;
		font-size: 14px;
		background-color: #ffffff;
		/* height:50px; */
	}
	.text {
		font-size: 30rpx;
		margin-top: 10rpx;
	}
	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}
	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
		background-color: #DDDDDD;
	}
	.item-box{
		background-color: #66AAFF;
		color: #000000;
	}
	.pagesComBox{
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		/* padding: 0; */
		font-size: 14rpx;
		background-color: #ffffff;
		flex-direction: column;
		padding: 30rpx;
	}
</style>
